<template>
  <div>
  	<myheader></myheader>
		
		<section class="products text-center">
			<div class="container">
				<h3 class="mb-4">商品列表</h3>
				<div class="row">
					<div v-for="item in goods_list" class="col-sm-6 col-md-3 col-product">
						<figure>
							<!-- <video id='video' width="240" height="240" :src="'http://localhost:8000/static/upload/'+item.img"  controls='contros' autoplay='autoplay' muted loop='loop'></video> -->
							<img class="rounded-corners img-fluid" :src="'http://localhost:8000/static/upload/'+item.img" 	width="240" height="240">
							
							<figcaption>
								
								<div class="thumb-overlay"><a :href="'http://localhost:8080/item/?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>
						<h4><a :href="'http://localhost:8080/item/?id='+item.id">
							<!-- <span v-html='item.name'></span> -->
							<span v-html='$options.filters.make_text(item.name)'></span>
							</a></h4>
						<p><span class="emphasis">${{item.price}}.00</span></p>
					</div>
				</div>
				<!-- 分页 -->
				<div class="page_button">
					<Pagination  v-model="pagination" @change="currentChange" layout="pager" small></Pagination>
				</div>
			</div>
		</section>
		
		<div class="divider"></div>
		
		<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

import axios from 'axios'
import myheader from './myheader.vue'
export default {
  data () {
    return {
    msg: "这是一个变量",
	//商品列表
	goods_list:[],
	pagination:{
		page:1,
		size:4,
		total:0
	},
	//排序变量
	column:'',
	order:'',
	text:'',
    }
  },
    // components注册组件 可以使用对应的标签来展示
  components: {
    myheader: myheader
  },
  mounted:function(){
	// this.text=this.$route.query.text
	// var text= localStorage.getItem('text')
	//   this.change_back()

	//接收参数
	var text= localStorage.getItem('text')
    //判断
    if(text.indexOf(' ')){
      text = text.split(" ");
      //格式转换
      this.text = JSON.stringify(text);
    }
	this.get_goods()
	},
	//过滤器
 filters:{
	 make_text(str){
		var mytext=str.toString()
		var text= localStorage.getItem('text')
		return mytext.replace(new RegExp(text,'g'),'<span class="highlight">'+text+'</span>')
	 }
 },
  methods:{
	jump_page(e){
		var val = e.target.value
		console.log(val)
		if(val >0 && val<=this.allpage){
			this.get_goods_self(val)
		}else{
			this.$Message('超出范围')
		}

	},
	//排序操作
	orderby(column){
		this.column=column
		this.get_goods_self(this.page)
	},
	sort(order){
		this.order = order
		this.get_goods_self(this.page)
	},
	//跳转页数
	search_page(){
		if(this.page_search>0 && this.page_search<=this.allpage){
			this.get_goods_self(this.page_search)
		}else{
			this.$Message('超出范围')
		}
	},
	  //切换页数
	currentChange(value) {
	  console.log(value.cur, value.size);
	  	this.pagination.page=value.cur
		this.get_goods()
    },

	//获取商品
	get_goods(){
		this.axios.get('http://127.0.0.1:8000/myapp/search/',{
			params:{page:this.pagination.page,size:this.pagination.size,text:this.text}
		}).then(res=>{

			// 数据操作
			// for(let i=0;i<res.data.data.length;i++){
			// 	res.data.data[i]['name']= res.data.data[i]['name'].
			// 	replace(new RegExp(this.text,'g'),'<span class="highlight">'+this.text+'</span>')
			// }

			this.goods_list=res.data.data
			// this.pagelist = res.data.page_list
			this.pagination.total = res.data.total
		})
	},
	//切换主题颜色
	change_back(){
		//获取样式表
		var styles = getComputedStyle(document.documentElement)
		// 动态更改
		document.documentElement.style.setProperty('--bg-color','#292a2d')
		document.documentElement.style.setProperty('--a-color','white')
		document.documentElement.style.setProperty('--text-color','#d3d3d3')
	},
  }
}


</script>
 
<style>
.video_button{
	margin-top: 190px;
	width: 95px;
	height: 30px;
	font-size: 2px;
}
.page_button{
    left: 50%;
    top: 50%;
    margin-left:45%;/*对应中间盒子宽度的一半*/
    margin-top:7%;/*对应中间盒子高度的一半*/

}
.page_button_self{
	margin-left: 10px;	
}
.page_input{
	width: 50px;
	height: 50px;
}
.highlight{
	color: red;
}
</style>